<template>
	<view class="container">
		<view style="z-index: 0;height: 100%;">
			<map id="myMap" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
			 :show-location="openaddress" enable-scroll :polyline="polylines" :include-points="include_points" @tap="bindtap" @callouttap="callouttap($event)"
			 @regionchange="regionchange" @updated="updated">
			</map>
		</view>
		<view class="store-tips">
			<cover-view class="store-des-box" v-if="storeFlag" @tap="storeDesEvn">
				<cover-image class="store-img" src="../../../static/images/dingwei.png"></cover-image>
				<cover-view class="store-des">
					<cover-view class="store-name">{{store.name}}</cover-view>
					<cover-view class="store-address">地址:{{store.address}}</cover-view>
					<cover-view class="store-tel">电话:{{store.tel}}</cover-view>
				</cover-view>
			</cover-view>
			<!-- <cover-image v-if="storeAdFlag" class="store-ad" src="../../static/hch-position/ad.jpg"></cover-image>
			<cover-image v-if="storeAdFlag" class="store-clear" @tap="hideAd" src="../../static/hch-position/clear.png"></cover-image> -->
		</view>
		<!-- <cover-view class="near-num">距离最近的计划点{{distanceL}}千米</cover-view>
		<cover-image class="address-icon" src="../../../static/images/dingwei.png"></cover-image> -->
		<view class="card">
			<view class="text">待完成：{{numlist.qrcode_uncount}}/{{numlist.qrcode_count}}</view>
			<view class="title-box">
				<view class="title">待记录</view>
				<view class="title1">已记录</view>
			</view>
		</view>
		<cover-image @tap="gorecording" class="gorecording" src="../../../static/images/recording.png"></cover-image>
		<cover-image @tap="gocheckme" class="gocheckme" src="../../../static/images/dingwei3.png"></cover-image>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getaddress = () => {
		uni.getLocation({
			type: 'gcj02',
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
			},
			fail: function(res) {
				console.log('定位失败：', res);
			}
		});
	};
	const gettaskMaplist = () => {
		common.post('HouseApi&a=task_qrcode_list', {
			village_id: _this.village_id,
			cate_id: _this.cate_id,
		}, data => {
			console.log('++++', data)
			_this.numlist = data;
			_this.listdata = data.qrcode_list;
			let points = [];
			let infomation = [];
			let info = {};
			info['points'] = [];
			for (let k in _this.listdata) {
				if (_this.listdata[k]) {
					let msgs = {};
					msgs['latitude'] = _this.listdata[k]['lat'];
					msgs['longitude'] = _this.listdata[k]['long'];
					let arr = {};
					arr['latitude'] = Number(_this.listdata[k]['lat']) ;
					arr['longitude'] = Number(_this.listdata[k]['long']);
					points.push(msgs);
					info['points'].push(arr);
					console.log('res' + k, infomation);
				}
			}
			info['color'] = "#2681F3";
			info['dottedLine'] = true;
			info['width'] = 3;
			info['arrowLine'] = true;
			info['arrowIconPath'] = '../../../static/images/right.png'
			infomation.push(info);
			_this.include_points = points;
			_this.polylines = infomation;

			console.log("55555555555555555", _this.polylines)
			let markers = [];
			for (let i in _this.listdata) {
				if (_this.listdata[i]) {
					let msg = {};
					msg['id'] = _this.listdata[i]['qrcode_id'];
					msg['name'] = _this.listdata[i]['name'];
					msg['latitude'] = Number(_this.listdata[i]['lat']);
					msg['width'] = 25;
					msg['height'] = 25;
					msg['longitude'] = Number(_this.listdata[i]['long']);
					msg['callout'] = {};
					msg['callout']['content'] = _this.listdata[i]['num_id'] + _this.listdata[i]['desc'] ;
					msg['callout']['fontSize'] = 12;
					msg['callout']['display'] = "ALWAYS";
					msg['callout']['bgColor'] = "rgba(0,0,0,0)"
					if (_this.listdata[i]['status'] == 1) {
						msg['iconPath'] = _this.iconPath.icon1;
						msg['callout']['color'] = "#00C691";
					} else {
						msg['iconPath'] = _this.iconPath.icon2;
						msg['callout']['color'] = "#F30000";
					}
					markers.push(msg);
				}
			}
			_this.markers = markers;
			console.log("hhhhhhhhhhhhhhhhhhhh", _this.markers)
		});
	};
	export default {
		data() {
			return {
				iconPath: {
					icon1: '../../../static/images/dingwei1.png',
					icon2: '../../../static/images/dingwei2.png'
				},
				listdata: {},
				numlist: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				cate_id: '',
				include_points: [],
				polylines: [],
				store: {},
				storeFlag: false,
				storeAdFlag: true,
				distanceL: 0, //附近店门的距离
				storeData: [{
					id: 1,
					name: '',
					address: '厦门市思明区汇景商业广场XXX1号',
					tel: '12345678900',
				}, {
					id: 2,
					name: '门店2号',
					address: '厦门市思明区汇景商业广场XXX2号',
					tel: '12345678900',
				}, ],
				latitude: 31.838374,
				longitude: 117.217553,
				markers: [],
				controls: [],
				openaddress:true,
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.cate_id = options.cate_id;
			console.log("cate_id", _this.cate_id)
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getaddress()
				gettaskMaplist()
			});
		},
		methods: {
			getLocation_msg(res) {
				if (res && res.lng) {
					_this.longitude = res.lng;
				}
				if (res && res.lat) {
					_this.latitude = res.lat;
				}
				console.log('反馈信息：', res);
			},
			gorecording(){
				uni.navigateTo({
					url:'/pages/village/smartQRcode/taskRecords?cate_id=' + _this.cate_id
				})
			},
			gocheckme(){
				getaddress()
				_this.openaddress= true
			},
			// 点击了门店信息
			storeDesEvn() {
				uni.showToast({
					title: '自己自定义跳门店详情页介绍',
					duration: 2000,
					icon: 'none'
				});
			},
			// 点击气泡
			callouttap(e) {
				console.log("000000000000000", e,name)
				var qrcode_id = e.detail.markerId
				uni.navigateTo({
					url: '/pages/village/smartQRcode/elevatorManagement?qrcode_id=' + qrcode_id + '&map_type=' + 1
				})
			},
			// 点击地图
			bindtap(id) {
				this.storeFlag = false;
				// this.storeAdFlag=true;
			},
			// 隐藏广告图片
			hideAd() {
				this.storeAdFlag = false;
			},
			updated() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.nearDistance(_this.markers, _this.latitude, _this.longitude)
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
			// 改变视野时改变经纬度
			regionchange(e) {
				let _this = this;
				// 使用 wx.createMapContext 获取 map 上下文
				var mapCtx = uni.createMapContext('myMap', this)
				mapCtx.getCenterLocation({
					success: function(res) {
						_this.centerLatitude = res.latitude;
						_this.centerLongitude = res.longitude;
						_this.nearDistance(_this.markers, _this.centerLatitude, _this.centerLongitude)
					},
					fail: function(res) {
						console.log(res);
					}
				}) //获取当前地图的中心经纬度
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
					Lb3 / 2), 2)));
				s = s * 6378.137; //地球半径
				s = Math.round(s * 10000) / 10000;
				return s
			},
			// 计算最近的距离
			nearDistance(array, centerLatitude, centerLongitude) {
				let temp = []
				for (let i = 0, l = array.length; i < l; i++) {
					const element = array[i];
					let d = this.distance(element.latitude, element.longitude, centerLatitude, centerLongitude);
					temp.push(d)
				};
				this.distanceL = Math.min.apply(null, temp);
			}
		},
		components: {

		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}

	.content {
		text-align: center;
		height: 400rpx;
	}

	.container {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	.card {
		position: fixed;
		top: 40rpx;
		width: 84.5%;
		border-radius: 10rpx;
		margin: 0rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
		padding: 10rpx 30rpx;
		z-index: 99;
		background: #FFFFFF;
	}

	.text {
		font-size: 28rpx;
		line-height: 60rpx;
		color: rgb(88, 88, 88);
		width: 100%;
	}

	.title-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}

	.title,
	.title1 {
		font-size: 28rpx;
		color: rgb(88, 88, 88);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 15rpx;
	}

	.title:before {
		content: '';
		display: block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: rgb(243, 0, 0);
		margin-right: 20rpx;
	}

	.title1:before {
		content: '';
		display: block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		background: rgb(0, 198, 145);
		margin-right: 20rpx;
	}

	// 提示
	.store-tips {
		width: 600rpx;
		height: 100rpx;
		margin: 10rpx auto;
		border-radius: 10rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 2;
		overflow: hidden;

		.store-des-box {
			background: #fff;
		}

		.store-img {
			width: 80rpx;
			height: 80rpx;
			border-radious: 10rpx;
			margin: 10rpx;
			float: left;
		}

		.store-des {
			padding-top: 8rpx;
			float: left;
			line-height: 1;
			font-size: 22rpx;
			color: #666;
			padding-left: 20rpx;

			.store-name {
				font-weight: 600;
				color: deeppink;
			}
		}

		.store-clear {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 7rpx;
			right: 7rpx;
			maigin: 30rpx;

		}
	}

	.address-icon {
		width: 38rpx;
		height: 40rpx;
		position: absolute;
		top: 22%;
		left: 50%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;

	}
	.gorecording {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		bottom: 100rpx;
		right: 20rpx;
		z-index: 2;
		border-radius: 120rpx;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
	}
	.gocheckme {
		position: absolute;
		width: 70rpx;
		height:70rpx;
		bottom: 100rpx;
		left: 20rpx;
		z-index: 2;
		border-radius: 70rpx;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
	}
	.near-num {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 17%;
		left: 50%;
		z-index: 2;
		font-size: 24rpx;
		background: #fff;
		transform: translate(-50%, 0)
	}
</style>
